import {Box, List, ListProps, styled} from "@mui/material";
import {FC, ReactNode} from "react";
import DGGrowView from "./DGGrowView.tsx";
import DGTextView from "./DGTextView.tsx";

interface MyDGListViewProps extends ListProps {
    gap?: number | string;
    bgColor?: boolean;
}

const MyDGListView = styled(List, {
    shouldForwardProp: (prop) => prop !== 'bgColor'
})<MyDGListViewProps>((
    {
        theme,
        gap,
        bgColor
    }
) => {
    const mode = theme.palette.mode === "light";
    return {
        "&": {
            display: "flex", flexDirection: "column", gap: gap ? gap : 0,
            padding: "0", boxShadow: "none !important",
            backgroundColor: !bgColor ? mode ? "#EDEDED" : "#EDEDED11" : "none",
        }
    }
});


interface DGListViewProps extends ListProps {
    children?: ReactNode,
    animation?: boolean,
    time?: number,
    NoBackground?: boolean,
    gap?: number | string,
    title?: string,
    subTitle?: string,
    Margin?: string
}

const DGListView: FC<DGListViewProps> = (
    {
        children,
        animation,
        time,
        NoBackground,
        gap,
        title,
        subTitle,
        Margin,
        ...other
    }
) => {


    // 有动画
    if (animation) return (<DGGrowView time={time} style={{margin: Margin}}>
        {/* 标题 */}
        {(title || subTitle) && <Box style={{padding: "15px 15px 0", marginBottom: "10px"}}>
            {/* 标题 */}
            {title && <DGTextView Title Bold>{title}</DGTextView>}
            {/* 副标题 */}
            {subTitle && <DGTextView Body Bold>{subTitle}</DGTextView>}
        </Box>}
        <MyDGListView gap={gap} bgColor={NoBackground} {...other}>{children}</MyDGListView>
    </DGGrowView>);

    // 无动画
    return (<Box style={{margin: Margin}}>
        {/* 标题 */}
        {(title || subTitle) && <Box style={{padding: "15px 15px 0", marginBottom: "10px"}}>
            {/* 标题 */}
            {title && <DGTextView Title Bold>{title}</DGTextView>}
            {/* 副标题 */}
            {subTitle && <DGTextView Body Bold>{subTitle}</DGTextView>}
        </Box>}
        <MyDGListView gap={gap} bgColor={NoBackground} {...other}>{children}</MyDGListView>
    </Box>);
}
export default DGListView;